@tailwind base;
@tailwind components;
@tailwind utilities;

/*appearance*/
@layer utilities {
  .bg-active {
    @apply bg-primary/70;
  }
  
  .rounded-4xl {
    border-radius: 2rem;
  }
  
  .rounded-5xl {
    border-radius: 2.5rem;
  }
  
  .rounded-6xl {
    border-radius: 3rem;
  }
  
  .backblur-btn-sm {
    @apply backdrop-blur-sm rounded shadow-md px-2 py-1 ;
  }
  
  .backblur-btn {
    @apply backdrop-blur rounded shadow-md px-2 py-1 ;
  }
  
  .backblur-btn-lg {
    @apply backdrop-blur-md rounded shadow-md px-2 py-1 ;
  }
  
  .border-sky {
    @apply border border-sky-500;
  }
  
  .border-red {
    @apply border border-red-500;
  }
  
  .border-rose {
    @apply border border-rose-500;
  }
  
  .border-emerald {
    @apply border border-emerald-500;
  }
  
  .border-gray-3 {
    @apply border border-gray-300;
  }
  
  .border-gray-4 {
    @apply border border-gray-400;
  }
  
  .border-gray {
    @apply border border-gray-500;
  }
}

/*base*/
@layer base {
  
  h1 {
    @apply text-3xl;
    @apply font-bold;
  }
  
  h2 {
    @apply text-2xl;
    @apply font-bold;
  }
  
  h3 {
    @apply text-xl;
    @apply font-bold;
  }
  
  h4 {
    @apply text-lg;
    @apply font-bold;
  }
  
  h5 {
    @apply text-base;
    @apply font-bold;
  }
  
  h6 {
    @apply text-base;
  }
  
  .scroll-thin {
    scrollbar-width: thin !important;
  }
  
  .scroll-none {
    scrollbar-width: none !important;
  }
  
  .scroll-inherit {
    scrollbar-width: inherit !important;
  }
  
}

/*comp*/
@layer components {
  .masker-xs {
    @apply flex-col-c absolute left-0 top-0 w-full h-full z-50 bg-gray-100/50;
  }
  
  .masker-sm {
    @apply flex-col-c absolute left-0 top-0 w-full h-full z-50 bg-gray-200/50;
  }
  
  .masker {
    @apply flex-col-c absolute left-0 top-0 w-full h-full z-50 bg-gray-300/50;
  }
  
  .masker-lg {
    @apply flex-col-c absolute left-0 top-0 w-full h-full z-50 bg-gray-400/50;
  }
  
  .masker-xl {
    @apply flex-col-c absolute left-0 top-0 w-full h-full z-50 bg-gray-500/50;
  }
  
  
  .my-btn {
    @apply my-label my-p-text-sm gap-0.5 pressable;
  }
  
  .my-title {
    @apply text-bold px-0.5 text-base;
  }
  
  .my-title-xs {
    @apply my-title;
    @apply text-xs;
  }
  
  .my-title-sm {
    @apply my-title;
    @apply text-sm;
  }
  
  .my-title-md {
    @apply my-title;
    @apply text-md;
  }
  
  .my-title-lg {
    @apply my-title;
    @apply text-lg;
  }
  
  .my-title-xl {
    @apply my-title;
    @apply text-xl;
  }
  
  .my-title-2xl {
    @apply my-title;
    @apply text-2xl;
  }
  
  .my-title-3xl {
    @apply my-title;
    @apply text-2xl;
  }
  
  .my-input {
    @apply rounded px-2 py-1 outline-none;
  }
  
  .my-input-sm {
    @apply rounded px-1 py-0.5 outline-none;
  }
  
  .my-input-xs {
    @apply rounded px-0.5 outline-none;
  }
  
  .my-label {
    @apply w-fit h-fit pointer noselect rounded text-nowrap inline-flex js-c it-c;
  }
  
  .my-label-gray {
    @apply my-label;
    @apply inter-gray;
  }
  
  
  @keyframes button-pop {
    0% {
      transform: scale(0.96);
    }
    40% {
      transform: scale(1.04);
    }
    100% {
      transform: scale(1);
    }
  }
  
  .mybtn {
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
  
  .mybtn:active:hover, .mybtn:active:focus {
    animation: button-pop 0s ease-out;
    transform: scale(0.96)
  }
  
  .mybtn:hover {
    box-shadow: 0 0 4px -1px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  }
  
  .mybtn-p {
    @apply mybtn;
    @apply px-1.5;
    @apply py-1;
  }
  
  .mybtn-r {
    @apply mybtn;
    @apply rounded;
  }
  
  .mybtn-b {
    @apply mybtn;
    @apply border;
  }
  
  .mybtn-bpr {
    @apply mybtn-b;
    @apply mybtn-p;
    @apply mybtn-r;
  }
}

/*font*/
@layer utilities {
  .font-default {
    font-family: sans-serif !important;
  }
  
  .font-inherit {
    font-family: inherit, sans-serif !important;
  }
  
  .font-heiti {
    font-family: 'SimHei', '黑体', sans-serif !important;
  }
  
  .font-yahei {
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif !important;
  }
  
  .font-songti {
    font-family: 'SimSun', '宋体', sans-serif !important;
  }
  
  .font-fangsong {
    font-family: 'FangSong', '仿宋', sans-serif !important;
  }
  
  .font-kaiti {
    font-family: 'KaiTi', '楷体', ‘STKaiti’, sans-serif !important;
  }
  
  .font-weixin-dushu {
    font-family: 'weixin-dushu', sans-serif !important;
  }
  
  .font-wd {
    @apply font-weixin-dushu;
  }
  
  .font-dj {
    @apply font-dingding-jinbu;
  }
  
  .font-dm {
    @apply font-douyin-meihao;
  }
  
  .font-douyin-meihao {
    font-family: 'douyin-meihao', sans-serif !important;
  }
  
  .font-dingding-jinbu {
    font-family: 'dingding-jinbu', sans-serif !important;
  }
  
  .font-xiaxing-kaiti {
    font-family: 'xiaxing-kaiti', sans-serif !important;
  }
  
  
}

/*interact*/
@layer utilities {
  .inter-gray {
    @apply bg-gray-100 hover:bg-gray-200 text-gray-500 hover:text-gray-700;
  }
  
  .inter-gray-bg {
    @apply bg-gray-100 hover:bg-gray-200;
  }
  
  .inter-sky-bg {
    @apply bg-sky-100 hover:bg-sky-200;
  }
  
  .pointer {
    @apply cursor-pointer select-none;
  }
  
  .pressable-sm, .pressable, .pressable-lg, .pressable-xl {
    cursor: pointer;
    user-select: none;
    /* display: inline-flex;
     justify-content: center;
     align-items: center;*/
  }
  
  .pressable-sm:active:hover, .pressable:active:focus {
    animation: button-pop 0s ease-out;
    transform: scale(0.98)
  }
  
  .pressable:active:hover, .pressable:active:focus {
    animation: button-pop 0s ease-out;
    transform: scale(0.96)
  }
  
  .pressable-lg:active:hover, .pressable-lg:active:focus {
    animation: button-pop 0s ease-out;
    transform: scale(0.92)
  }
  
  .pressable-xl:active:hover, .pressable-xl:active:focus {
    animation: button-pop 0s ease-out;
    transform: scale(0.88)
  }
}

/*keyframe*/

/*layout*/
@layer utilities {
  .my-p-text {
    @apply px-2 py-1;
  }
  
  .my-p-text-2xs {
    @apply px-0.5;
    @apply py-[1px];
  }
  
  .my-p-text-xs {
    @apply px-1;
    @apply py-0.5;
  }
  
  .my-p-text-sm {
    @apply px-1.5;
    @apply py-[3px];
  }
  
  .my-p-text-lg {
    @apply px-3;
    @apply py-1.5;
  }
  
  .my-p-text-xl {
    @apply px-4;
    @apply py-2;
  }
  
  
  .flex-row {
    @apply flex;
  }
  
  .flex-row-sc {
    @apply flex;
    @apply items-center;
  }
  
  .flex-row-cs {
    @apply flex;
    @apply justify-center;
    
  }
  
  .flex-row-c {
    @apply flex;
    @apply flex-row;
    @apply justify-center;
    @apply items-center;
  }
  
  .flex-col { /*🔔自带一个 flex-direction:columnm;*/
    @apply flex;
    /*@apply flex-col; 🔔会引发循环调用*/
  }
  
  .flex-col-sc {
    @apply flex;
    @apply flex-col;
    @apply items-center;
  }
  
  .flex-col-cs {
    @apply flex;
    @apply flex-col;
    @apply justify-center;
  }
  
  .flex-col-c {
    @apply flex;
    @apply flex-col;
    @apply items-center;
    @apply justify-center;
  }
  
  .inline-flex-row {
    display: inline-flex;
    flex-direction: row;
  }
  
  .inflex-row {
    display: inline-flex;
    flex-direction: row;
  }
  
  .inflex-row-c {
    display: inline-flex;
    flex-direction: row;
    @apply js-c it-c;
  }
  
  .inflex-c {
    display: inline-flex;
    @apply js-c it-c;
  }
  
  .inline-flex-c {
    display: inline-flex;
    @apply js-c it-c;
  }
  
  
  .inline-flex-col {
    display: inline-flex;
    flex-direction: column;
  }
  
  .inflex-col {
    display: inline-flex;
    flex-direction: column;
  }
  
  .inflex-col-c {
    display: inline-flex;
    flex-direction: column;
    @apply js-c it-c;
  }
  
  .js-b {
    @apply justify-between;
  }
  
  .js-c {
    @apply justify-center;
  }
  
  .js-s {
    @apply justify-start;
  }
  
  .js-e {
    @apply justify-end;
  }
  
  .it-c {
    @apply items-center;
  }
  
  .it-s {
    @apply items-start;
  }
  
  .it-e {
    @apply items-end;
  }
  
}

@layer utilities {
  .grid-cols-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
  
  .grid-cols-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
  
  .grid-cols-auto-fit-0\.25 {
    grid-template-columns: repeat(auto-fit, minmax(25px, 1fr));
  }
  
  .grid-cols-auto-fit-0\.5 {
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  }
  
  .grid-cols-auto-fit-1 {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
  
  .grid-cols-auto-fit-1\.25 {
    grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  }
  
  .grid-cols-auto-fit-1\.5 {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  
  .grid-cols-auto-fit-1\.75 {
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  }
  
  .grid-cols-auto-fit-2 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  
  .grid-cols-auto-fit-2\.25 {
    grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
  }
  
  .grid-cols-auto-fit-2\.5 {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
  
  .grid-cols-auto-fit-2\.75 {
    grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
  }
  
  .grid-cols-auto-fit-3 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
  
  .grid-cols-auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
  
  .grid-cols-auto-fill-0\.25 {
    grid-template-columns: repeat(auto-fill, minmax(25px, 1fr));
  }
  
  .grid-cols-auto-fill-0\.5 {
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  }
  
  .grid-cols-auto-fill-1 {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
  
  .grid-cols-auto-fill-1\.25 {
    grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
  }
  
  .grid-cols-auto-fill-1\.5 {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  
  .grid-cols-auto-fill-1\.75 {
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  }
  
  .grid-cols-auto-fill-2 {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  
  .grid-cols-auto-fill-2\.25 {
    grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
  }
  
  .grid-cols-auto-fill-2\.5 {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
  
  .grid-cols-auto-fill-2\.75 {
    grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
  }
  
  .grid-cols-auto-fill-3 {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
  
}


/*text*/
@layer utilities {
  .text-bold {
    @apply font-bold;
  }
  
  .text-normal {
    @apply font-normal;
  }
  
  .noselect {
    @apply select-none;
  }
}

/*dark*/
@layer utilities {
  .dark {
    @apply bg-black text-gray-50;
    
    .bg-gray-100, .bg-accent {
      @apply bg-gray-800;
    }
    
    .bg-gray-200 {
      @apply bg-gray-700;
    }
    
    /*.text-gray-400 {
      @apply text-gray-500;
    }
    
    .text-gray-500 {
      @apply text-gray-400;
    }*/
    
    .text-gray-600 {
      @apply text-gray-300;
    }
    
    .text-gray-700 {
      @apply text-gray-200;
    }
    
    .text-gray-800 {
      @apply text-gray-100;
    }
  }
}
